<template>
    <div class="container">
        <div class="head">
            <div class="btn" @click="onGoPhoneDial">手动拨号</div>
            <div class="btn" @click="onImportFile">导入号码</div>
        </div>
        <div class="body">
            <!--  -->
            <no-data v-if="list.length === 0" content="暂无手机号" />
            <div class="list">
                <DelSlideLeft v-for="(item, index) in list" :key="index" :time="item.creationTime" @delItem="onDelItem">
                    <div @click="onGoDetail(item.key)">
                        <div class="list-i">
                            <div class="row-b">
                                <div class="title">{{ item.name }}</div>
                                <div class="num">{{ item.completeList?.length ?? 0 }}/{{ item.fromList?.length ?? 0 }}</div>
                            </div>
                            <div class="time">{{ item.date }}</div>
                        </div>
                        <div class="line" v-if="index != list.length - 1"></div>
                    </div>
                </DelSlideLeft>
            </div>
        </div>
        <customTabBar url="/pages/phoneList/index"/>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad, onShow } from "@dcloudio/uni-app"
import customTabBar from "@/components/tabbar/index.vue"
// 侧边滑动组件
import DelSlideLeft from '@/components/del-slide-left/del-slide-left.vue'
import { confirm, toast } from '@/utils/util'
const phonePopup = ref()
const formList = ref()
const list = ref([] as { creationTime:string, fromList: [], completeList:[], name: string, date: string, key: string }[])
const storageKeyList = ref([] as string[])
// onLoad(() => {})

onShow(() => {
    list.value = []
    const storageInfo = uni.getStorageInfoSync()

    storageKeyList.value = storageInfo.keys.filter(item => {
        return item.includes('phone')
    }).sort((a, b) => {
        const keyNumA = Number(a.split('phone')[1])
        const keyNumB = Number(b.split('phone')[1])
        return keyNumB - keyNumA
    })
    storageKeyList.value.forEach((item: string) => {
        list.value.push(uni.getStorageSync(item))
    })
})

const onImportFile = () => {
    if (storageKeyList.value.length >= 20) {
        toast('最多只能保存20个号码，请先删除旧号码')
        return
    }
    uni.chooseMessageFile({
        count: 1,
        type: 'file',
        success: async (res) => {
            uni.navigateTo({
                url: '/pages/phoneName/index',
                success: function (r) {
                    r.eventChannel.emit('acceptDataFromOpenerPage', res)
                }
            })
        }
    })
}

// 跳转到详情
const onGoDetail = (event: string) => {
    uni.navigateTo({
        url: '/pages/phoneCustomerList/index?key=' + event
    })
}
// 跳转到手动拨号
const onGoPhoneDial = () => {
    uni.navigateTo({
        url: '/pages/phoneDial/index'
    })
}
// 根据子组件传递回来的内容 删除本地存储里的数据
const onDelItem = async (event: string) => {
    await confirm('确定要删除吗？')
    console.log(event, '子传回来的数据')
    console.log(list, 'listlist')
    // 根据event 删除 list.value的数据 可以比较list里的creationTime 字段
    list.value = list.value.filter(item => item.creationTime !== event)
    await uni.removeStorageSync('phone' + event)
}

</script>

<style lang="scss" scoped>
.container {
    height: calc(100vh - constant(safe-area-inset-bottom) - 100rpx);
    height: calc(100vh - env(safe-area-inset-bottom) - 100rpx);
    background-color: #fafafc;
    overflow: auto;
    @include padding(24rpx 30rpx);
}

.head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .btn {
        width: 337rpx;
        height: 88rpx;
        border-radius: 16rpx;
        background-color: #3e5ff5;
        color: #ffffff;
        text-align: center;
        line-height: 88rpx;
        font-size: 28rpx;
        font-weight: 600;
    }
}

.list {
    background-color: #ffffff;
    margin-top: 24rpx;
    border-radius: 16rpx;

    .row-b {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .list-i {
        @include padding(49rpx 24rpx);
    }

    .title {
        color: #202536;
        font-size: 32rpx;
        font-weight: 600;
    }

    .num {
        color: #3E5FF5;
        font-weight: 600;
        font-size: 28rpx;
    }

    .time {
        color: #565868;
        font-size: 24rpx;
        margin-top: 24rpx;
    }

    .line {
        border-bottom: 1rpx solid #E5E6EB;
    }
}
.ces{
    height: 100px;
    background-color: red;
}
</style>
